import React from 'react'
import { xiangqingApi } from '../../api/index'
import { useLoaderData } from 'react-router-dom'
import { ResultPage, Card } from "antd-mobile";
import { Button, Toast } from "antd-mobile";
import style from '../../path/xiangqing/index.module.css'

function Index() {
    const loader=useLoaderData()
  return (
    <div>
      <ResultPage
        status="success"
        title="详情页"
        description="内容详情可折行，建议不超过两行建议不超过两行建议不超过两行"
      >
        <ResultPage.Card style={{ padding: 8 }}>
          <Card title="故宫博物馆" />
          <span>北京a4景区</span>
          今日开放
          <Card className={style.ff}>
            <span>所在地:{loader.xiangqing.location}</span>
            <span>{loader.xiangqing.name}</span>
            <span>价格:{loader.xiangqing.price}</span>

            <span>{loader.xiangqing.category}</span>
            <span>{loader.xiangqing.name}</span>
            <span>{loader.xiangqing.startTime}</span>

            <span>{loader.xiangqing.location}</span>
            <span>{loader.xiangqing.name}</span>
            <span>{loader.xiangqing.price}</span>
          </Card>
          <Card className={style.ff}>
            <span>所在地:{loader.xiangqing.location}</span>
            <span>{loader.xiangqing.name}</span>
            <span>价格:{loader.xiangqing.price}</span>

            <span>{loader.xiangqing.category}</span>
            <span>{loader.xiangqing.name}</span>
            <span>{loader.xiangqing.startTime}</span>

            <span>{loader.xiangqing.location}</span>
            <span>{loader.xiangqing.name}</span>
            <span>{loader.xiangqing.price}</span>
          </Card>
          <Card className={style.ff}>
            <span>所在地:{loader.xiangqing.location}</span>
            <span>{loader.xiangqing.name}</span>
            <span>价格:{loader.xiangqing.price}</span>

            <span>{loader.xiangqing.category}</span>
            <span>{loader.xiangqing.name}</span>
            <span>{loader.xiangqing.startTime}</span>

            <span>{loader.xiangqing.location}</span>
            <span>{loader.xiangqing.name}</span>
            <span>{loader.xiangqing.price}</span>
          </Card>
          <Card className={style.ff}>
            <span>所在地:{loader.xiangqing.location}</span>
            <span>{loader.xiangqing.name}</span>
            <span>价格:{loader.xiangqing.price}</span>

            <span>{loader.xiangqing.category}</span>
            <span>{loader.xiangqing.name}</span>
            <span>{loader.xiangqing.startTime}</span>

            <span>{loader.xiangqing.location}</span>
            <span>{loader.xiangqing.name}</span>
            <span>{loader.xiangqing.price}</span>
          </Card>
        </ResultPage.Card>
        <div className={style.gh}></div>
      </ResultPage>
    </div>
  );
}

export default Index
export const loader = async ({ request, params }) => {
    console.log(params)
    console.log(request)
    const { data:res } = await xiangqingApi(params.id)
    console.log(res)
 return{xiangqing:res}
};
